import 'dart:io';

import 'package:flutter/material.dart';
import 'package:mc_card/common/layout_type.dart';
import 'package:mc_card/pages/card_page.dart';
import 'package:mc_card/pages/shequ/shequ_page.dart';
import 'package:mc_card/pages/website_page.dart';
import 'package:mc_card/pages/shop_page.dart';
import 'package:mc_card/pages/community_page.dart';
import 'package:mc_card/splash.dart';
import 'package:redux/redux.dart';

import 'package:flutter/services.dart';

void main() => runApp(new App());

class App extends StatelessWidget {
  final Store<int> store;
  final String title;

  App({Key key, this.store, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primaryIconTheme: const IconThemeData(color: Colors.white),
        brightness: Brightness.light,
        primaryColor: new Color.fromARGB(255, 0, 215, 198),
        accentColor: Colors.cyan[300],
      ),
      // 先走一遍启动页，加载个官宣 or 广告啥的，然后再替换成 MainPage
      home: SplashPage(),
      // home: new MainPage(title: '名片'),
    );
  }
}

class MainPage extends StatefulWidget {
  MainPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MainPageState createState() => new _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 默认展示的tab页 类型
  LayoutType _layoutSelection = LayoutType.card;

  // 文字颜色 选中状态 & 非选中状态区分
  Color _colorTabMatching({LayoutType layoutSelection}) {
    return _layoutSelection == layoutSelection ? Colors.cyan[300] : Colors.grey;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      // 构建页面主体内容
      body: _buildBody(),
      // 设置底部tab切换bar
      bottomNavigationBar: _buildButtonNavBar(),
    );
  }

  Widget _buildBody() {
    // 根据当前 页面选中类型，来判断显示哪个页面
    LayoutType layoutSelection = _layoutSelection;
    switch (layoutSelection) {
      case LayoutType.card:
        return SheQuApp(context);
      case LayoutType.shop:
        return HomePage();
      case LayoutType.community:
        return CommunityPage();
      case LayoutType.website:
        return MyPage();
    }
  }

  // 底部bar 构建 具体使用直接看源码搜索，有demo的
  Widget _buildButtonNavBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      items: [
        _buildTabNavItem(
            icon: _layoutSelection == LayoutType.card
                ? "images/ic_main_tab_find_pre.png"
                : "images/ic_main_tab_find_nor.png",
            layoutSelection: LayoutType.card),
        _buildTabNavItem(
            icon: _layoutSelection == LayoutType.shop
                ? "images/ic_main_tab_company_pre.png"
                : "images/ic_main_tab_company_nor.png",
            layoutSelection: LayoutType.shop),
        _buildTabNavItem(
            icon: _layoutSelection == LayoutType.community
                ? "images/ic_main_tab_contacts_pre.png"
                : "images/ic_main_tab_contacts_nor.png",
            layoutSelection: LayoutType.community),
        _buildTabNavItem(
            icon: _layoutSelection == LayoutType.website
                ? "images/ic_main_tab_my_pre.png"
                : "images/ic_main_tab_my_nor.png",
            layoutSelection: LayoutType.website),
      ],
      // tab点击 事件处理，切换tab页
      onTap: _onSelectTab,
    );
  }

  // 底部 tab bar widget
  BottomNavigationBarItem _buildTabNavItem({String icon, LayoutType layoutSelection}) {
    String text = layoutName(layoutSelection);
    return BottomNavigationBarItem(
      icon: new Image.asset(
        icon,
        width: 35.0,
        height: 35.0,
      ),
      title: Text(
        text,
        style: TextStyle(
          color: _colorTabMatching(layoutSelection: layoutSelection),
        ),
      ),
    );
  }

  // 修改选中类型
  void _onLayoutSelected(LayoutType selection) {
    setState(() {
      _layoutSelection = selection;
    });
  }

  void _onSelectTab(int index) {
    switch (index) {
      case 0:
        _onLayoutSelected(LayoutType.card);
        break;
      case 1:
        _onLayoutSelected(LayoutType.shop);
        break;
      case 2:
        _onLayoutSelected(LayoutType.community);
        break;
      case 3:
        _onLayoutSelected(LayoutType.website);
        break;
    }
  }
}
